<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="角色列表">
      <el-checkbox-group v-model="form.type">
        <ol>
          <li v-for="(item, index) in roles">
            <el-checkbox :label="item.id" :key="index">{{
              item.name
            }}</el-checkbox>
          </li>
        </ol>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item>
      <el-button class="saveUpdate" type="success" @click="submitForm(form)"
        >保存</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
import { roleList, userRoleList ,userRoleUpdate} from "@/api/index.js";
import { ElMessage } from "element-plus";
export default {
  name: "UserRole",
  props: ["id"],
  data() {
    return {
      form: {
        name:null,
        type: [],
      },
      roles: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      var that = this;
      var params = {};
      params.isPaging = true;
      await roleList(params)
        .then(function (res) {
          if (res.code == 1) {
            that.roles = res.data;
          }
        })
        .catch();
      var params = {};
      params.id = this.id;
      await userRoleList(params)
        .then(function (res) {
          console.log(res.data, params);
          if (res.code == 1) {
            that.form.type = res.data;
          }
        })
        .catch();
    },

   async submitForm(data) {
      var params = {};
      params.id = this.id;
      params.roleId=Array.from(data.type)
      // console.log(params);
      await userRoleUpdate(params)
        .then(function (res) {
          console.log(res.data, params);
          if (res.code == 1) {
            ElMessage.success("保存成功");
          }
        })
        .catch();
    },
  },
};
</script>
<style scoped>
ol {
  margin-top: 30px;
  width: 420px;
  /* border: 1px solid red; */
}
ol li {
  float: left;
  width: 120px;
  /* border: 1px solid red; */
}
.saveUpdate {
  float: left;
  /* border: 1px solid red; */
}
</style>